<template>
	<view class="container">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>

		<nav-bar fixed :title="examPaperName" />

		<view class="content">
			<view class="card">
				<view class="question-type">
					<text>{{ curQuesTypeName }}</text>
					<view class="info">
						<text>{{ `【${curQues.questionScore}分】` }}</text>
						<text>{{ curQuesIdx }}</text>
						<text>/</text>
						<text>{{ curQuesTypeArr.length }}</text>
					</view>
				</view>
				<view class="divider"></view>

				<view class="question">{{ curQues.questionTitleContent }}</view>

				<view class="answer status-answer">
					<view class="section-title">正确答案：</view>
					<uni-data-checkbox
						mode="button"
						v-if="
							['单选题', '多选题', '判断题'].includes(
								curQues.questionTypeName
							)
						"
						v-model="curQues.questionCorrect"
						:multiple="curQues.questionTypeName === '多选题'"
						:localdata="curQues.questionItems"
						:map="{ text: 'content2', value: 'prefix' }"
					/>

					<view
						v-else-if="curQues.questionTypeName === '填空题'"
						class="answer-options"
					>
						<view
							class="option"
							v-for="(item, index) in curQues.questionItems"
							:key="index"
						>
							<text>{{ item.prefix }}.</text>
							<text>{{ item.content }}</text>
						</view>
					</view>

					<view
						v-else-if="curQues.questionTypeName === '简答题'"
						class="answer-area"
					>
						{{ curQues.questionCorrect }}
					</view>
				</view>

				<view class="answer status-reply">
					<view class="section-title">
						<text>您的答案：</text>
						<view class="answer-info">
							<text :class="[renderStatus()]">
								{{ renderStatusTxt() }}
							</text>
							<text>
								得分: {{ curQues.customerAnswerScore || 0 }}分
							</text>
						</view>
					</view>
					<!-- <uni-data-checkbox
						mode="button"
						v-if="
							['单选题', '多选题', '判断题'].includes(
								curQues.questionTypeName
							)
						"
						v-model="curQues.paperCustomerAnswer"
						:multiple="curQues.questionTypeName === '多选题'"
						:localdata="curQues.questionItems"
						:map="{ text: 'content2', value: 'prefix' }"
					/> -->

					<view
						v-if="
							['单选题', '多选题', '判断题'].includes(
								curQues.questionTypeName
							)
						"
						class="answer-area"
					>
						{{ curQues.paperCustomerAnswer || '' }}
					</view>

					<view
						v-else-if="curQues.questionTypeName === '填空题'"
						class="answer-options"
					>
						<view
							class="option"
							v-for="item in curQues.gapFillingContent"
							:key="item.prefix"
						>
							<text>{{ item.prefix }}.</text>
							<text>{{ item.content || '' }}</text>
						</view>
					</view>

					<view
						v-else-if="curQues.questionTypeName === '简答题'"
						class="answer-area"
					>
						{{ curQues.djQuestionCorrect?.customContent || '' }}
					</view>
				</view>

				<view class="analysis">
					<view class="section-title">解析：</view>
					<view class="analysis-content">
						{{ curQues.questionAnalyze || '暂无' }}
					</view>
				</view>

				<view
					class="explain"
					v-if="curQues.questionTypeName === '填空题'"
				>
					<view class="section-title">批改说明：</view>
					<view class="explain-content">
						{{ curQues.djQuestionCorrectList?.comment || '暂无' }}
					</view>
				</view>
				<view
					class="explain"
					v-else-if="curQues.questionTypeName === '简答题'"
				>
					<view class="section-title">批改说明：</view>
					<view class="explain-content">
						{{ curQues.djQuestionCorrect?.comment || '暂无' }}
					</view>
				</view>
			</view>

			<view class="btns">
				<button
					class="btn primary"
					:disabled="isPrevOne"
					@tap="changeQuestion('prev')"
				>
					上一题
				</button>
				<button
					v-if="!isNextOne"
					class="btn primary"
					@tap="changeQuestion('next')"
				>
					下一题
				</button>
				<button v-else class="btn success" @tap="goBack">离开</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { toRaw, computed, ref, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getExamPaperScoreInfo, getErrorQuestion } from '@/net/lilunceyan.js'
import NavBar from '@/components/nav-bar.vue'

let type = 1,
	typeIdx,
	quesIdx
onLoad(params => {
	type = params.type
	typeIdx = params.typeIdx
	quesIdx = params.quesIdx
	getQuestionData(params.id)
})

const examPaperName = ref()
// 格式化后数据信息
const questionList = ref({})
// 当前类型
const curTypeIdx = ref(0)
// 当前类型下第几题
const curQuesIdx = ref(1)

// 当前类型名称
const curQuesTypeName = computed(() => {
	const questionNumArr = ['一', '二', '三', '四', '五', '六']
	return (
		questionNumArr[curTypeIdx.value] + '、' + curQues.value.questionTypeName
	)
})
// 当前类型下试题列表
const curQuesTypeArr = computed(() => {
	return questionList.value[curTypeIdx.value] || []
})
// 当前试题
const curQues = computed(() => {
	return curQuesTypeArr.value[curQuesIdx.value - 1] || {}
})
const isPrevOne = computed(() => {
	return curQuesIdx.value <= 1 && curTypeIdx.value <= 0
})
const isNextOne = computed(() => {
	return (
		curQuesIdx.value >= curQuesTypeArr.value.length &&
		curTypeIdx.value >= questionList.value.length - 1
	)
})

const renderStatus = () => {
	if (curQues.value.customerAnswerScore === 0) return 'txt-error'
	return curQues.value.customerAnswerScore === curQues.value.questionScore
		? 'txt-success'
		: 'txt-part'
}
const renderStatusTxt = () => {
	if (curQues.value.customerAnswerScore === 0) return '回答错误'
	return curQues.value.customerAnswerScore === curQues.value.questionScore
		? '回答正确'
		: '部分正确'
}

const getQuestionData = async id => {
	const fatch = type == 1 ? getExamPaperScoreInfo : getErrorQuestion
	const { data } = await fatch({ answerId: id })
	examPaperName.value = data.examPaperName
	questionList.value = data.djExamPaperScoreVoList.map(item => {
		item.djExamPaperScores.forEach(vItem => {
			if (vItem.questionTypeName === '多选题') {
				vItem.questionCorrect = vItem.questionCorrect?.split(',') || []
				// vItem.paperCustomerAnswer = vItem.paperCustomerAnswer?.split(',') || []
			}
			if (vItem.questionTypeName === '填空题') {
				vItem.gapFillingContent =
					vItem.djQuestionCorrectList.gapFillingContent || []
			}
			vItem.questionItems = vItem.questionItems?.map(v => {
				v.disable = true
				v.content2 = `${v.prefix}. ${v.content}`
				return v
			})
		})
		return item.djExamPaperScores
	})
	curTypeIdx.value = typeIdx
	curQuesIdx.value = quesIdx
}

const changeQuestion = tag => {
	if (tag === 'prev') {
		if (curQuesIdx.value > 1) {
			// 当前类型内循环
			curQuesIdx.value--
		} else {
			if (curTypeIdx.value > 0) {
				// 类型切换 数据重置
				curTypeIdx.value--
				// 定位到新类型内最后一个
				curQuesIdx.value = curQuesTypeArr.value.length
			}
		}
	} else if (tag === 'next') {
		if (curQuesIdx.value < curQuesTypeArr.value.length) {
			// 当前类型内循环
			curQuesIdx.value++
		} else {
			if (curTypeIdx.value < questionList.value.length - 1) {
				// 类型切换 数据重置
				curTypeIdx.value++
				// 定位到新类型内第一个
				curQuesIdx.value = 1
			}
		}
	}
}

const goBack = () => {
	uni.navigateBack({ delta: 1 })
}
</script>

<style lang="scss">
@import '/static/common.scss';
page {
	height: 100%;
}
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.card {
			flex: 1;
			margin-top: 20rpx;
			padding: 24rpx 30rpx;
			overflow: auto;
			background-color: #fff;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
			box-shadow: rgba(0, 0, 0, 0.08) 0px -1px 3px 0;
		}
		.btns {
			padding: 30rpx;
			display: flex;
			background-color: #fff;
			.btn {
				flex: 1;
				line-height: 88rpx;
			}
		}
	}
}
.question-type {
	display: flex;
	justify-content: space-between;
	> text {
		color: #3b95ff;
	}
	.info {
		color: #999;
		text:nth-child(2) {
			color: #3b95ff;
		}
	}
}
.question {
	font-size: 30rpx;
	margin-bottom: 30rpx;
	color: #000;
}
.section-title {
	padding: 20rpx 0;
	font-size: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #000;
}
.answer {
	&-info > text:last-child {
		margin-left: 30rpx;
		color: #3b95ff;
	}
	&-options .option {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		color: #909090;
		opacity: 0.7;
		& + .option {
			margin-top: 20rpx;
		}
		> text {
			&:last-child {
				flex: 1;
				padding: 0 20rpx;
				min-height: 88rpx;
				line-height: 88rpx;
				border-radius: 8rpx;
			}
			& + text {
				margin-left: 20rpx;
			}
		}
	}
	&-area {
		min-height: 44rpx;
		line-height: 44rpx;
		font-size: 30rpx;
		padding: 20rpx;
		border-radius: 8rpx;
	}
}
.status-answer {
	.answer-options .option > text:last-child,
	.answer-area {
		border: 1px solid #51bb88;
		// background-color: #e3f2ee;
		color: #51bb88;
	}
	:deep(.checklist-box.is--button.is-checked) {
		border-color: #51bb88 !important;
		.checklist-text {
			color: #51bb88 !important;
		}
	}
}
.status-reply {
	.answer-options .option > text:last-child,
	.answer-area {
		border: 1px solid #3b95ff;
		color: #3b95ff;
	}
	:deep(.checklist-box.is--button.is-checked) {
		border-color: #3b95ff !important;
		.checklist-text {
			color: #3b95ff !important;
		}
	}
}
:deep(.uni-data-checklist .checklist-group) {
	display: block !important;
	.checklist-box.is--button {
		margin: 0 !important;
		padding: 20rpx !important;
		.checklist-content {
			.checklist-text {
				line-height: 22px;
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}
		& + .checklist-box.is--button {
			margin-top: 20rpx !important;
		}
		.checkbox__inner,
		.radio__inner {
			display: none;
		}
		&.is-disable {
			opacity: 0.7;
			.checklist-text {
				font-size: 30rpx;
				color: #909090;
			}
		}
		&.is-checked.is-disable {
			opacity: 0.7;
		}
	}
}
:deep(.is-input-border) {
	border-radius: 3px;
}
.analysis,
.explain {
	margin-top: 20rpx;
	&-content {
		line-height: 22px;
		font-size: 30rpx;
	}
}
.analysis-content {
	color: #666;
}
.explain-content {
	color: #3b95ff;
}
</style>
